import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import {
  View, StyleSheet, Text, TextInput, LayoutAnimation
} from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import CustomButton from 'src/components/button/CustomButton'
import { ONE_PIXEL, ScaleS, ScaleT, IS_IOS, IS_IPHONEX } from 'src/utils/ScreenUtil'
import CustomImage from 'src/components/image/CustomImage'

export default class UsefulExpressions extends PureComponent {
  static defaultProps = {
    value: ''
  }

  static propTypes = {
    onCancel: PropTypes.func,
    closeModal: PropTypes.func,
    onSave: PropTypes.func,
    params: PropTypes.object,
    value: PropTypes.string,
    title: PropTypes.string
  }

  constructor (props) {
    super(props)
    this.state = {
      value: props.value,
      textLength: props.value.length
    }
  }

  render () {
    const { value, textLength } = this.state
    const { params, title } = this.props
    return (
      <KeyboardAwareScrollView
        contentContainerStyle={styles.container}
        enableAutomaticScroll={false}
        enableOnAndroid={true}
        scrollEnabled={false}
        keyboardShouldPersistTaps="handled"
        innerRef={this.scrollRef}
        onKeyboardWillShow={this.onKeyboardWillShow}
        onKeyboardWillHide={this.onKeyboardWillHide}
      >
        <View style={styles.title}>
          <Text style={styles.headerText}>{title || '新增常用语'}</Text>
          <CustomButton style={styles.headerCloseBtn} onPress={this._onCancel}>
            <CustomImage
              style={styles.headerClose}
              source={require('src/imgC/message/common_close.png')}/>
          </CustomButton>
        </View>
        <View style={styles.editView}>
          <TextInput
            style={styles.textInput}
            multiline={true}
            placeholder={'输入您的常用回复，请不要填写QQ、微信等联系方式 或广告信息......'}
            value={value}
            maxLength={200}
            onChangeText={this._onChangeText}
          />
          <Text style={styles.limitText}>{textLength}/200</Text>
        </View>
        <CustomButton style={styles.saveBtn} params={params} onPress={this._onSave}>
          <Text style={styles.saveText}>保存</Text>
        </CustomButton>
      </KeyboardAwareScrollView>
    )
  }

  _onChangeText = (text) => {
    this.setState({
      value: text,
      textLength: text.length
    })
  }

  /**
   * 取消
   * @private
   */
  _onCancel = () => {
    const { closeModal, onCancel } = this.props
    onCancel && onCancel(closeModal)
  }

  /**
   * 保存
   * @private
   */
  _onSave = (params) => {
    const { closeModal, onSave } = this.props
    const { value } = this.state
    onSave && onSave(value, closeModal, params)
  }

  scrollRef = ref => {
    this.keyboardScroll = ref
  }

  onKeyboardWillShow = ({ endCoordinates: { height } }) => {
    // if (IS_IOS) {
    const distance = height - ScaleS(150)
    LayoutAnimation.easeInEaseOut()
    this.keyboardScroll.setNativeProps({
      style: { marginTop: Math.min(0, -distance) }
    })
    // }
  }

  onKeyboardWillHide = () => {
    // if (IS_IOS) {
    LayoutAnimation.easeInEaseOut()
    this.keyboardScroll.setNativeProps({
      style: { marginTop: 0 }
    })
    // }
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    paddingHorizontal: ScaleS(20),
    paddingBottom: ScaleS(IS_IPHONEX ? 35 : 15)
  },
  title: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
    height: ScaleS(55),
    borderBottomColor: 'rgba(151, 151, 151, 0.25)',
    borderBottomWidth: ONE_PIXEL,
    borderStyle: 'solid'
  },
  headerText: {
    color: '#3C3C3C',
    fontSize: ScaleT(15),
    fontWeight: '500'
  },
  headerCloseBtn: {
    width: ScaleS(10),
    height: ScaleS(10)
  },
  headerClose: {
    width: ScaleS(10),
    height: ScaleS(10),
    resizeMode: 'cover'
  },
  editView: {
    height: ScaleS(172),
    marginVertical: ScaleS(20),
    marginBottom: ScaleS(107)
  },
  textInput: {
    flex: 1,
    textAlignVertical: 'top',
    fontSize: ScaleS(14),
    color: '#999999'
  },
  limitText: {
    // alignSelf: 'flex-start',
    color: '#999999',
    fontSize: ScaleT(11)
  },
  saveBtn: {
    width: '100%',
    height: ScaleS(40),
    backgroundColor: '#FFE400',
    borderRadius: ScaleS(5),
    alignItems: 'center',
    justifyContent: 'center'
  },
  saveText: {
    color: '#000000',
    fontSize: ScaleT(13),
    fontWeight: '500'
  }
})
